<template>
  <div id="songcomment">
    <div class="playlistcomment">
      <div class="commentinfo" v-for="item in comment.hotComments" :key="item">
        <div class="commentphoto"><img :src="item.user.avatarUrl" alt=""></div>
        <div class="comment_name_time">
          <div class="comment_name"><span>{{item.user.nickname}}</span></div>
          <div class="comment_time"><span>{{item.tiemStr}}</span></div>
          <div class="remark">{{item.content}}</div>
          <div class="comment_start_replybtn">
            <span class="comment_start" @click="getabc()"><i class="el-icon-tableware"></i>{{item.likedCount}}</span>
            <span class="comment_replybtn">回复</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getcommenthot} from '../../network/songlist'


export default {
  name: 'SongComment',
  data() {
    return {
      comment:null
    }
  },
  methods:{
    /* getabc() {
      console.log(1112);
      getcommenthot(this.$route.query.id,2).then(res => {
      console.log(res.data);
    })
    } */
  },
  created() {
    getcommenthot(this.$route.query.id,2).then(res => {
      this.comment = res.data;
    })
  }
}
</script>

<style>
.playlistcomment {
  width: 65vw;
}
.commentinfo {
  display: flex;
  margin: 0 0 2rem 0;
}
.commentphoto img{
  width: 40px;
  border-radius: 50%;
}
.comment_name_time {
  margin: 0 0 0 0.5rem;
}
.comment_name {
  margin: 0 0 0.2rem 0;
}
.remark {
  margin: 0.8rem 0 0 0;
}
.comment_start_replybtn {
  margin: 0.8rem 0 0 0;
}
.comment_replybtn {
  margin: 0 0 0 1rem;
}
</style>